<template>
  <div>
    <Oneluyou />
    <nav>
      <p class="p1 iconfont icon-sousuo" @click="fun()">想看的小说这里都有</p>
      <p class="p2 iconfont icon-wenhai-sousuo-qiehuanjiubanben">男生</p>
    </nav>
    <div class="fenlei">
      <P @click="bangdan()">榜单</P>
      <P @click="wanjie()">完结</P>
      <P @click="xinshu()">新书</P>
    </div>

    <main>
      <p class="p1">
        <span class="s1">必读推荐</span>
        <span class="s2">更多 ></span>
      </p>
      <div class="bidu">
        <div class="bdtop">
          <img src="1_03.jpg" alt />
          <p>
            <span>仙武纪元，三月三。在掌门的不懈努力之下，青云道宗终于迎来了第八位弟子叶平。为了能让叶平留下，也为了能够得到叶平的尊重，宗门上...</span>
            <span>-简介-</span>
          </p>
        </div>
        <div class="bdbottom">
          <p>不会真有人觉得修仙难吧</p>

          <p>
            <van-rate
              v-model="value"
              :size="15"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />9.9
          </p>
          <p>黑夜弥天 | 其他 | 127.6万字</p>
        </div>
      </div>
      <p class="p1">
        <span class="s1">新书速递</span>
        <span class="s2">更多 ></span>
      </p>
      <div class="xinshu">
        <div class="xs" v-for="(v,i) in newarr1" :key="i" @click="xiangqing()">
          <img :src="v.url" alt />
          <p class="span1" >{{v.book}}</p>
          <p class="span2">{{v.book1}}</p>
          <p class="span3">{{v.zuozhe}}</p>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="lunbotu">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="lunbo_03.jpg" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="lunbo2_03.jpg" alt />
          </van-swipe-item>
        </van-swipe>
      </div>
      <p class="p1">
        <span class="s1">完本红文</span>
        <span class="s2">更多 ></span>
      </p>
      <div class="wanben">
        <div class="wb" v-for="(v,i) in newarr2" :key="i">
          <div class="wbleft">
            <img :src="v.src" alt />
          </div>
          <div class="wbright">
            <p class="wbp1">{{v.book}}</p>
            <p class="wbp2">{{v.name}}</p>
            <p class="wbp3">{{v.num}}</p>
          </div>
        </div>
      </div>
      <p class="p1">
        <span class="s1">爆款热搜</span>
        <span class="s2">更多 ></span>
      </p>
      <div class="baokuan">
        <div class="bk" v-for="(v,i) in newarr3" :key="i">
          <div class="bkleft">
            <img :src="v.src" alt />
          </div>
          <div class="bkright">
            <p class="bkp1">{{v.book}}</p>
            <p class="bkp2">{{v.xq}}</p>
            <p class="bkp3">{{v.num}}</p>
            <p class="bkp4">{{v.neirong}}</p>
          </div>
        </div>
      </div>
    </main>

  </div>
</template> 

<script>

export default {
  computed: {
    newarr1(){
      return this.$store.state.arr;
    },
    newarr2(){
      return this.$store.state.arr1;
    },
    newarr3(){
      return this.$store.state.arr2;
    }
  },
  data() {
    return {
      value:5
    };
  },
  methods: {
    fun(){
      this.$router.push("/sousuo")
    },
    bangdan(){
      this.$router.push("/fenlei")
    },
    wanjie(){
      this.$router.push("/wanjie")
    },
    xinshu(){
      this.$router.push('/xinshu')
    },
    xiangqing(){
      this.$router.push('./xiangqing')
    }
  },
  created(){
    this.$store.dispatch("getaxios","/xs")
  }
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 117px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe .van-swipe-item img {
  width: 335px;
  height: 117px;
}

nav {
  display: flex;
  justify-content: center;
  height: 70px;
  width: 100%;
  margin: 0 auto;
  position: fixed;
  top: 0;
  background: white;
  align-items: center;
  font-size: 14px;
  color: #c6c6c6;
  z-index: 1;
}
nav .p1 {
  height: 50px;
  background: #f8f8f8;
  width: 200px;
  border-radius: 25px 0 0 25px;
  line-height: 50px;
  box-sizing: border-box;
  padding-left: 20px;
  font-size: 14px;
}
nav .p2 {
  height: 50px;
  width: 100px;
  background: #f8f8f8;
  text-align: center;
  border-radius: 0 25px 25px 0;
  line-height: 50px;
  font-size: 14px;
}
.fenlei {
  height: 59px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  margin-top: 70px;
  margin-bottom: 10px;
  font-weight: 700;
}
.fenlei p {
  width: 101px;
  height: 59px;
  background: #f8f8f8;
  border-radius: 59px;
  text-align: center;
  line-height: 59px;
}
main {
  min-height: 1900px;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 20px;
}
main .p1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
main .p1 .s2 {
  font-size: 14px;
  color: #a1a1a1;
}
main .p1 .s1 {
  font-size: 20px;
  font-weight: 900;
}
main .bidu {
  height: 232px;
  /* background-color: pink; */
  border-bottom: 1px solid #f8f8f8;
  margin-bottom: 36px;
}
main .bidu .bdtop {
  height: 140px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
main .bidu .bdtop img {
  height: 140px;
  width: 100px;
  border-radius: 15px;
  margin-right: 20px;
}
main .bidu .bdtop p {
  width: 278px;
  height: 140px;
  /* text-align: center; */
  box-sizing: border-box;
  padding: 20px;
  background-color: #a9aa9c;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #f4f4e8;
}
main .bidu .bdbottom p:nth-child(1) {
  font-size: 18px;
  font-weight: 700;
}
main .bidu .bdbottom p:nth-child(3) {
  font-size: 12px;
  color: #999798;
}
main .bidu .bdbottom p:nth-child(2) {
  font-size: 12px;
  color: #999798;
}
main .xinshu {
  height: 496px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main .xinshu .xs {
  width: 105px;
  height: 240px;
  /* background: pink; */
}
main .xinshu .xs img {
  width: 105px;
  height: 130px;
}

main .xinshu .xs .span1 {
  font-weight: 700;
  font-size: 14px;
}
main .xinshu .xs .span2 {
  font-size: 12px;
  color: #a9a9a9;
}
main .xinshu .xs .span3 {
  font-size: 12px;
  color: #7d7d7d;
}
main .lunbotu {
  height: 117px;
  width: 335px;
  background: pink;
  margin-bottom: 26px;
  overflow: hidden;
}
main .wanben {
  height: 358px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main .wanben .wb {
  width: 150px;
  height: 85px;
  display: flex;
}
main .wanben .wb .wbleft {
  margin-right: 20px;
}
main .wanben .wb img {
  width: 50px;
  height: 66px;
}
main .wanben .wbp1 {
  font-weight: 700;
  font-size: 16px;
}
main .wanben .wbp2 {
  color: #9b9b9b;
  font-size: 14px;
}
main .wanben .wbp3 {
  color: #cdb27b;
  font-size: 14px;
}
main .baokuan {
  height: 561px;
  margin-bottom: 50px;
}
main .baokuan .bk {
  height: 143px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .baokuan .bk .bkleft img {
  width: 77px;
  height: 102px;
  bottom: .01rem solid #f8f8f8;
}
main .baokuan .bk .bkright,
.bkleft {
  height: 102px;
  margin-right: 12px;
}
main .baokuan .bk .bkright p {
  margin: 5px;
}
main .baokuan .bk .bkright .bkp1 {
  font-weight: 700;
}
main .baokuan .bk .bkright .bkp2 {
  font-weight: 700;
  font-size: 10px;
  color: #b6b6b6;
}
main .baokuan .bk .bkright .bkp3 {
  font-weight: 700;
  font-size: 10px;
  color: #d8b66e;
}
main .baokuan .bk .bkright .bkp4 {
  font-weight: 700;
  color: #777777;
  font-size: 12px;
}
</style>